<template>
    <!-- 支付订单信息展示组件 -->
    <el-card class="table-data-card">
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
            <template #slotStatus="{ row }">
                <div v-if="row.status == 1" style="color: black;">待提交</div>
                <div v-if="row.status == 2" style="color: coral;">待支付</div>
                <div v-if="row.status == 3" style="color: brown;">支付超时/取消</div>
                <div v-if="row.status == 4" style="color: chartreuse;">支付成功</div>
            </template>
            <template #slotAmount="{ row }">
                {{ row.amount / 100 }}
            </template>
            <template #slotOperation="{ row }">
                <el-dropdown placement="bottom-end" trigger="click" v-if="row.status == 2">
                    <span class="iconfont icon-caozuo"></span>
                    <template #dropdown>
                        <el-dropdown-item @click="payPayOrder(row)">余额支付</el-dropdown-item>
                        <el-dropdown-item @click="cancelPayOrder(row)">取消支付</el-dropdown-item>
                    </template>
                </el-dropdown>
                <div v-else>-</div>
            </template>
        </Table>
    </el-card>
    <PayOrderForm ref="payOrderFormRef" @reload="loadDataList" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

import PayOrderForm from "./PayOrderForm.vue";
const payOrderFormRef = ref(null)

const payPayOrder = async (row) => {
    payOrderFormRef.value.show(row)
}

const cancelPayOrder = async (row) => {
    proxy.Confirm({
        message: "确定取消支付吗？",
        okFun: async () => {
            let result = await proxy.Request({
                method: "put",
                url: proxy.Api.cancelPayOrder + row.id,
            })
            if (!result) {
                return;
            }
            proxy.Message.success("取消支付成功")
            loadDataList()
        }
    })
}

const tableData = ref({
    pageNo: 1,
    pageSize: 15,
})
const tableOptions = {}
const searchForm = ref({})

const loadDataList = async () => {
    let result = await proxy.Request({
        url: proxy.Api.queryMyPayOrders,
    })
    if (!result) {
        return;
    }
    Object.assign(tableData.value, result)
    tableData.value.totalCount = result.data.length
}

const columns = [
    {
        label: '支付订单id',
        prop: 'id',
        width: 180
    },
    {
        label: '订单id',
        prop: 'orderId',
        width: 180
    },
    {
        label: '支付金额(元)',
        prop: 'amount',
        scopedSlots: 'slotAmount'
    },
    {
        label: '状态',
        prop: 'status',
        scopedSlots: 'slotStatus'
    },
    {
        label: '创建时间',
        prop: 'createTime',
    },
    {
        label: '更新时间',
        prop: 'updateTime',
    },
    {
        label: '操作',
        prop: 'operation',
        width: 100,
        scopedSlots: 'slotOperation'
    },
]

</script>

<style lang="scss" scoped>
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
